<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
    <link th:href="@{/css/my.css}" rel="stylesheet"/>

    <link th:href="@{/ajax/libs/bootstrap-select/bootstrap-select.min.css}" rel="stylesheet"/>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{/dist/css/media.css}">
    <style>
        .current{
            color: #f40!important;
        }
    </style>
</head>
<body class="bd-bg">
<!--右侧主体-->
<div class="standard-detail">
    <div class="detail-main">
        <!--基本信息-->
        <div class="top clearfix">
            <div class="left-img"><img  alt=""></div>
            <div class="right-mes col-sm-12 col-md-10">
                <div class="mes-top clearfix">
                    <label class="fl">生产阶段：</label>
                    <div class="progressBar">
                        <ul class="progressBar-ul clearfix col-md-8" style="padding: 0;" id="progressBar-ul">
                            <li th:class="'p-item  active ' + ${s.stageStatus == '2'?'current':''}"  th:each="s:${stages}" th:text="${s.stageName}">整地</li>
                        </ul>
                    </div>
                </div>
                <div class="mes-list clearfix">
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>标准名称：</label><span
                            th:text="${standard.standardName}">西红柿-千禧-001</span></div>
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>作物名称：</label><span
                            th:text="${plan.cropNameCn}">西红柿-千禧-001</span></div>
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>作物品种：</label><span
                            th:text="${plan.cropVarietiesCn}">西红柿-千禧-001</span></div>
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>作物类别：</label><span
                            th:text="${plan.cropTypeCn}">西红柿-千禧-001</span></div>
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>总周期天数：</label><span></span></div>
                </div>
            </div>
        </div>
        <!--tab-->
        <div class="btm">
            <div class="btm-top">
                <ul id="tabList" class="tabList clearfix">
                    <li th:each="s:${stages}" th:class="'item '+ ${s.cssClass}" th:text="${s.stageName}">标题内容</li>
                </ul>
            </div>
            <div class="btm-content">
                <div th:each="s:${stages}" th:class="'tab-content '+ ${s.cssClass}">

                    <div class="part-item clearfix">
                        <div class="item-left show-detail" th:utext="${s.stageDetail}">
                            <p>
                                北京市巨山农场隶属于北京首都农业集团有限公司，位于首都环境保护区的西山脚下，西邻八大处公园、北京射击场，北倚香山、植物园，东望玉泉山、颐和园。环境优美、空气清新，无公害污染经农业部和北京市环境监测中心对农场生态环境监测，农场水质、大气、土壤的质量均达到国家规定的优级标准。</p>
                            <p>
                                巨山农场位于北辛庄村巨山生活区附近，原属8341部队（中央警卫团），后划拨三元集团管理。该公司下属另有延庆基地。国家标准委员会曾授予该基地“国家农业标准化示范区”，国家高层领导也曾到此视察。</p>
                        </div>
                        <div class="item-right">
                            <div class="btn-outer">
                                <a class="btn btn-primary" th:attr="typed-id = *{s.stageMirrorId}"
                                   onclick="showDetail(2,this)">详细信息</a>
                            </div>
                        </div>
                    </div>
                    <div class="step-list">
                        <!--第一天开始-->
                        <div class="step-item" th:each="group:${s.groupWorks}">
                            <div class="title" th:text="${group.workDate}">第一天</div>

                            <!--第一个工作n-->
                            <div class="main" th:each="work:${group.works}">
                                <div class="step-left">
                                    <div class="step-name">
                                        <p th:text="${work.workType == '1'?'栽培':'农资'}">栽培</p>
                                        <p th:text="${work.workName}">松土平地</p>
                                    </div>
                                    <div class="step-indro show-detail" onload="resetText(this)"
                                         th:utext="${work.workDetail}"
                                         th:block>

                                        <p>
                                            北京市巨山农场隶属于北京首都农业集团有限公司，位于首都环境保护区的西山脚下，西邻八大处公园、北京射击场，北倚香山、植物园，东望玉泉山、颐和园。环境优美、空气清新，无公害污染经农业部和北京市环境监测中心对农场生态环境监测，农场水质、大气、土壤的质量均达到国家规定的优级.
                                        </p>
                                    </div>
                                </div>
                                <div class="step-right">
                                    <div class="btn-outer">
                                        <a class="btn btn-primary"
                                           th:attr="typed-id = *{work.workMirrorId},work-date = *{work.workDate}"
                                           onclick="showDetail(1,this)">详细信息</a>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>

                        <!--第一天结束-->

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ruoyi/js/my-common-js.js}"></script>

<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>

<script th:inline="javascript">
    var ctx = [[@{
        /}]];
        $(function () {

            $("#tabList li").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                var index = $(this).index();
                $(".btm-content .tab-content").eq(index).addClass("active").siblings().removeClass("active");
            });


            var _liArr = $('#progressBar-ul').children(".p-item")
            var _liWidth = 100 / _liArr.length
            _liArr.each(function () {
                $(this).width(_liWidth + '%')
            })

            // 生产阶段
            var _currenttep = 2
            _liArr.each(function (index) {
                if (index < _currenttep) {
                    $(this).addClass('active')
                }
            })
        });

        $(function () {
            $('.show-detail').html(getText($('.show-detail').html()));
        })

        function showDetail(type, obj) {
            var id = $(obj).attr('typed-id')
            var workDate = $(obj).attr('work-date')
            if (workDate) {
                workDate = dateFtt(new Date(workDate))

            }
            var link = ctx + 'system/front_wenshi/detail?id=' + id + "&type=" + type + "&workDate=" + workDate;
            $.modal.openTab("详细信息", link);


        }

</script>
</body>
</html>
